﻿
@{
    ViewBag.Title = "MoenyView";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="moapp">
        <template>
            <el-row>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8" :offset="8">
                    <div class="grid-content bg-purple-light">
                        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="工程师编号">
                                <el-input v-model="ruleForm.staffid"></el-input>
                            </el-form-item>
                            <el-form-item label="月工作天数">
                                <el-input v-model="ruleForm.m_workhours"></el-input>
                            </el-form-item>
                            <el-form-item label="月收益金额" >
                                <el-input v-model="ruleForm.m_insurance"></el-input>
                            </el-form-item>
                            <el-form-item label="缴纳保险金">
                                <el-input v-model="ruleForm.m_sum"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-on:click="saveData" v-if="adminUser">保存</el-button>
                                <el-button v-on:click="getData">计算</el-button>
                            </el-form-item>
                            <el-form-item label="本月薪水">
                                <el-input v-model="m_salary"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            </el-row>

        </template>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        var moneyApp = new Vue({
            el: '#moapp',
            data: {
                ruleForm: {
                    staffid: "",
                    m_workhours: "",
                    m_insurance: "",
                    m_sum: "",
                },
                m_salary: "",
                adminUser: false,
            },
            created() {
                var a = localStorage.getItem('region');
                if (a == "管理员")
                    this.adminUser = true;
            },
            methods: {
                getData() {
                    if (this.ruleForm.m_workhours < 0 || this.ruleForm.m_workhours > 30)
                        alert("工作时长小于0或大于30天");
                    else if (this.ruleForm.staffid == "" || this.ruleForm.m_workhours == "" || this.ruleForm.m_insurance == "" || this.ruleForm.m_sum == "") {
                        alert("请填写完整的信息");
                    }
                    else
                    {
                        axios.post("/test/get_salary", { staffid: this.ruleForm.staffid, m_workhours: this.ruleForm.m_workhours, m_insurance: this.ruleForm.m_insurance, m_sum: this.ruleForm.m_sum })
                        .then(function (response) {
                            moneyApp.m_salary = response.data;
                        });
                    }
                },
                saveData() {
                    if (this.ruleForm.staffid == "" || this.ruleForm.m_workhours == "" || this.ruleForm.m_insurance == "" || this.ruleForm.m_sum == "") {
                        alert("请填写完整的信息");
                    }
                    else {
                        axios.post("/test/save_salary", { staffid: this.ruleForm.staffid, m_workhours: this.ruleForm.m_workhours, m_insurance: this.ruleForm.m_insurance, m_sum: this.ruleForm.m_sum })
                            .then(function (response) {
                                alert(response.data);
                            });
                    }  
                }
            }
        })
    </script>
</body>
</html>

